<script setup stype="ts">
import { ref, onMounted, reactive, onUpdated } from "vue";
const data = ref({ time: 0, steps: 0, long: 0 });
const isUpdated = ref(false);

// 在组件挂载后执行累加逻辑
onUpdated(() => {
  isUpdated = true;
});

const updateData = () => {
  data.value = {
    time: 68,
    steps: 11896,
    long: 7.96,
  };
};
</script>
<template>
  <div class="nb">
    <div class="title">
      <h3>今日运动数据</h3>
    </div>
    <div :class="{ updated: isUpdated }">
      <p>运动时长：{{ data.time }}分钟</p>
      <p>行走步数：{{ data.steps }}步</p>
      <p>运动距离：{{ data.long }}公里</p>
    </div>
    <div>
      <button @click="updateData">更新数据</button>
    </div>
  </div>
</template>
<style>
.nb {
  background-color: rgb(243, 243, 243);
  height: 300px;
  width: 500px;
  border-block: 1px solid;
  border-block-color: red;
}
h3 {
  font-size: 36px;
}
button {
  color: white;
  background-color: rgb(56, 187, 56);
}
.title {
  text-align: center;
  margin: 0 auto;
  /* background-color: red; */
  line-height: 100px;
  height: 80px;
}
.un {
  text-decoration: underline;
}
</style>
